<template>
  <div>
    <el-dialog :title="title" :visible.sync="open" width="700px" :close-on-click-modal="false" style="margin-top: 150px" append-to-body>
      <el-row :gutter="20">
        <el-form enctype="multipart/form-data" :model="form" ref="form">
          <el-col :span="12">
            <!-- 缩略图显示-->
            <div class="img-show" v-if="form.cardFrontImgUrl">
              <img :src="form.cardFrontImgUrl" class="avatar">
              <span class="actions">
                <!-- 删除 -->
                <span class="item">
                  <i class="el-icon-delete" @click="cardFrontDel()"></i>
                </span>
              </span>
            </div>
            <!-- 图片上传 -->
            <el-upload
              accept=".jpg,.png,.jpeg"
              v-else
              action="#"
              class="uploader-avatar"
              list-type="picture-card"
              :auto-upload="false"
              :show-file-list="false"
              :on-change="cardFrontImgPreview">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

            <div class="tip" style="text-align: center;padding-top: 10px;width: 300px;">身份证正面（头像）</div>

          </el-col>
          <el-col :span="12">
            <!-- 缩略图显示-->
            <div class="img-show" v-if="form.cardBackImgUrl">
              <img :src="form.cardBackImgUrl" class="avatar">
              <span class="actions">
                <!-- 删除 -->
                <span class="item">
                  <i class="el-icon-delete" @click="cardBackDel()"></i>
                </span>
              </span>
            </div>
            <!-- 图片上传 -->
            <el-upload
              accept=".jpg,.png,.jpeg"
              v-else
              action="#"
              class="uploader-avatar"
              list-type="picture-card"
              :auto-upload="false"
              :show-file-list="false"
              :on-change="cardBackImgPreview">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

            <div class="tip" style="text-align: center;padding-top: 10px;width: 300px;">身份证背面（国徽）</div>

          </el-col>
        </el-form>
      </el-row>
      <el-row :gutter="20">
<!--        <el-col :span="8">-->
<!--          　<div class="grid-content bg-purple"></div>-->
<!--        </el-col>-->
        <el-col :span="8">
          <div class="tip" style="color:red;text-align: left;padding-top: 2px;width: 300px;">
            <p>
              1.仅允许上传.jpg,.png,.jpeg格式文件
            </p>
            <p>
              2.照片大小不允许超过2M
            </p>
          </div>
        </el-col>
        <el-col :span="8">
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>

  import { cardUpload } from "@/api/site/labour/staff";

  export default {
    name: "cardUpload",
    data() {
      return {
        // 弹出层标题
        title: "上传身份证",
        // 是否显示弹出层
        open: false,
        // 表单数据
        form: {
          id: 0,
          cardFrontImgUrl: '',
          cardBackImgUrl: '',
          cardFrontFile: undefined,
          cardBackFile: undefined
        },
      }
    },
    methods: {
      show(institutionCode, id) {
        console.log(id);
        this.reset();
        this.form.institutionCode = institutionCode;
        this.form.id = id;
        this.open = true;
      },
      //图片缩略图
      cardFrontImgPreview: function(file){
        if (file.raw.size / 1024 / 1024 > 2) {
          this.$message.error("身份证图片大小不能超过2MB!");
          return;
        }
        //生成临时缩略图
        this.form.cardFrontImgUrl =  URL.createObjectURL(file.raw);
        this.form.cardFrontFile = file.raw;
      },
      cardBackImgPreview: function(file){
        if (file.raw.size / 1024 / 1024 > 2) {
          this.$message.error("身份证图片大小不能超过2MB!");
          return;
        }
        //生成临时缩略图
        this.form.cardBackImgUrl =  URL.createObjectURL(file.raw);
        this.form.cardBackFile = file.raw;
      },
      cardFrontDel: function(){
        this.form.cardFrontImgUrl =  '';
      },
      cardBackDel: function(){
        this.form.cardBackImgUrl =  '';
      },
      // 表单重置
      reset() {
        this.form = {
          institutionCode: null,
          cardFrontImgUrl:'',
          cardBackImgUrl: '',
          cardFrontFile: undefined,
          cardBackFile: undefined
        };
        this.resetForm("form");
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单提交
      submitForm() {
        if (!this.form.cardFrontFile) {
          this.$message.error("请上传身份证正面");
          return;
        }
        if (!this.form.cardBackFile) {
          this.$message.error("请上传身份证背面");
          return;
        }
        // 照片上传
        const loading = this.$loading({
          lock: true,
          text: '身份证上传中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        // 使用form表单的数据格式
        const params = new FormData();
        params.append("cardFrontFile", this.form.cardFrontFile);
        params.append("cardBackFile", this.form.cardBackFile);
        params.append("institutionCode", this.form.institutionCode);
        params.append("id", this.form.id);
        cardUpload(params).then(response => {
          this.$modal.msgSuccess("上传成功");
          loading.close();
          this.open = false;
          this.$parent.getList();
        }).catch(() => {
          loading.close();
        });
      }
    }
  }
</script>
<style lang="scss" scoped>

  ::v-deep .el-upload--picture-card{
    width: 300px;
    height: 200px;
  }
  ::v-deep .el-upload{
    width: 300px;
    height: 200px;
    line-height: 200px;
  }

  .uploader-avatar>>>.el-upload {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 300px;
    height: 200px;
    cursor: pointer;
    line-height: 200px;
    vertical-align: top;
    overflow: hidden;
  }
  .img-show{
    position: relative;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 300px;
    height: 200px;
    cursor: pointer;
    overflow: hidden;
  }
  .uploader-avatar>>>.el-upload:hover {
    border-color: #409EFF;
  }
  .uploader-avatar>>>i {
    font-size: 28px;
    color: #8c939d;
  }
  .avatar{
    width: 300px;
    height: 200px;
    display: block;
  }

  .actions{
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 200px;
    left: 0;
    top: 0;
    cursor: default;
    text-align: center;
    color: #fff;
    opacity: 0;
    font-size: 20px;
    background-color: rgba(0,0,0,.5);
    transition: opacity .3s;
  }
  .actions:hover{
    opacity: 1;
  }
  .actions:hover span{
    display: inline-block;
  }
  .actions span{
    display: none;
    margin: 0 16px;
    cursor: pointer;
  }

</style>
